<template>
	<view class="health-wrap">
		<view class="health-top">
			<h-upload :defaultUrl="defaultUrl" center :fileList="fileList" @afterRead="afterRead" @delete="deletePic" width="80%" height="350rpx"></h-upload>
			<text class="txt">{{tips}}</text>
		</view>
		<view class="health-status-wrap">
			<view class="title">
				我的健康证信息
			</view>
			<view class="item">
				<view class="left">
					健康证状态：
				</view>
				<view class="right">
					{{healthInfo?.verified==1?'已核验':'未核验'}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					核验结果：
				</view>
				<view class="right">
					{{healthInfo?.approved==1?'已通过':'未通过'}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					剩余有效天数：
				</view>
				<view class="right">
					{{healthInfo?.valid_days?healthInfo.valid_days:'0'}} 天
				</view>
			</view>
		</view>
    <h-toast></h-toast>
	</view>

</template>

<script>
  import Taro from "@tarojs/taro";
	import {
		request,
	} from '../../utils/http.js';
	export default {
    name: 'healthCard',
		data() {
			return {
				fileList: [''],
        defaultUrl: require('./static/img/health-default.png'),
				healthUrl: require('./static/img/health-default.png'),
				healthInfo: '',
				tips: "点击上传健康证",
			}
		},
		onShow() {
			this.getHealthInfo()
		},
		methods: {
			//初始获取健康证
			getHealthInfo() {
				request("/user/health/info/get").then(res => {
					this.healthUrl = res?.datas?.image_url;
          if(!!this.healthUrl) {
            this.fileList = [this.healthUrl]
          }
					this.healthInfo = res?.datas;
					this.tips = '点击更新健康证';
				}).catch(err => {
					console.log(err)
				})
			},

			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					Taro.getFileSystemManager().readFile({
						filePath: url,
						encoding: 'base64',
						success: (data) => {
							let str = data.data;
							resolve(str)
						},
						fail: (err) => {
							Taro.hToast({
								message: JSON.stringify(err),
							});
						}
					});
				})
			},


			uploadFn(str, index) {
					request("/user/health/base64image/upload", {
						"user_id": Taro.getStorageSync('user_id'),
						"image_base64": str,
						"image_ext": 'jpeg'
					}).then(res => {
            console.log(res)
            this.fileList.splice(index, 1, {file: str, status: 1})
						Taro.hToast({
							message: '上传成功！',
						});
					}).catch(err => {
            this.fileList.splice(index, 1, '')
            err && Taro.hToast({
              message: err,
            });
					})

			},

			// 新增图片
			afterRead(data) {

        let {index, file} = data
        this.fileList.splice(index, 1, {file, status: 0})
        this.uploadFn(file, index)

/*
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let data = await this.uploadFn(result)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: data?.datas?.url
					}))
					fileListLen++
				}*/
			},


			// 删除图片
			deletePic(data) {
        let {file, index} = data
        if(file) {
          this.fileList.splice(index, 1)
        }
			},
		}

	}
</script>
<style lang="less">
	.health-wrap {
		margin: 0;
		padding: 0;
	}

	.health-top {
		width: 100%;
		height: auto;
		padding: 20rpx;
		margin-top: 30rpx;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;

		.u-upload {
			padding: 20rpx;
			box-sizing: border-box;
		}

		.txt {
			font-size: 28rpx;
			color: #d5ad57;
			margin-top: 40rpx;
		}
	}

	.health-status-wrap {
		margin-top: 60rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			padding: 0 20rpx;
			position: relative;
			padding-left: 13px;
			margin: 24px 0;
		}

		.title:before {
			content: "";
			background-color: #d5ad57;
			width: 7rpx;
			height: 40rpx;
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -8px;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
		}

		.item {
			background: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1px solid #f5f5f0;
			padding: 0 20rpx;
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}
	}
</style>
